import React from 'react';
import { Layout, Menu } from 'antd';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { FundOutlined, StarOutlined, LogoutOutlined } from '@ant-design/icons';

const { Header } = Layout;

function Navbar() {
  const location = useLocation();
  const navigate = useNavigate();
  const isAuthenticated = localStorage.getItem('token');

  const handleLogout = () => {
    localStorage.removeItem('token');
    navigate('/login');
  };

  if (!isAuthenticated) {
    return null;
  }

  return (
    <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
      <div className="logo" />
      <Menu theme="dark" mode="horizontal" selectedKeys={[location.pathname]}>
        <Menu.Item key="/funds" icon={<FundOutlined />}>
          <Link to="/funds">基金列表</Link>
        </Menu.Item>
        <Menu.Item key="/my-funds" icon={<StarOutlined />}>
          <Link to="/my-funds">我的基金</Link>
        </Menu.Item>
        <Menu.Item key="logout" icon={<LogoutOutlined />} onClick={handleLogout}>
          退出登录
        </Menu.Item>
      </Menu>
    </Header>
  );
}

export default Navbar; 